<div class="gis-container">

	<div class="gis-box">
		<!-- header -->
		<div class="gis-header">GIS</div>

		<!-- main-map -->
		<div id="mainMap" class="ol-map">
			<!-- overlay start-->
			<!-- locate marker overlay -->
			<div id="locate-marker-overlay">
				<div class="action-menu-widget" *ngIf="overlayIsShow[OVERLAY_KEY.LOCATE_MARKER_OVERLAY]" [@fadeIn]
					[@fadeOut] [@shrink] [@stretch]>
					<div class="action-menu-entry" (click)="createEvent(CreateEvent.Equipment)">
						<div class="action-menu-entry-text text-ellipsis">{{'Gis.Gis.New_Equip' | translate}}</div>
					</div>
					<div class="action-menu-entry" (click)="createEvent(CreateEvent.Incident)">
						<div class="action-menu-entry-text text-ellipsis">{{'Gis.Gis.New_Incident' | translate}}</div>
					</div>
					<div class="action-menu-entry" (click)="createEvent(CreateEvent.ScheduleEvent)">
						<div class="action-menu-entry-text text-ellipsis">{{'Gis.Gis.New_Scheduled_Event' | translate}}
						</div>
					</div>
				</div>
			</div>

			<!-- alert overlay -->
			<div id="alert-overlay">
				<div class="alert-overlay-container" *ngIf="overlayIsShow[OVERLAY_KEY.ALERT_OVERLAY]" [@zoomIn]>
					<itmp-alert-overlay [mainMap]="map" [currentAlert]="featureData"
						(alertInteraction)="alertOperation($event)"></itmp-alert-overlay>
				</div>
			</div>

			<!-- cluster menu overlay -->
			<div id="cluster-features-overlay" style="width:200px;height:20px;background:transparent;overflow: visible">
				<div class="cluster-menu-container" *ngIf="overlayIsShow[OVERLAY_KEY.CLUSTER_FEATURES_OVERLAY]"
					[@zoomIn]>
					<itmp-clus-feat-overlay [features]="featureData" [type]="clustrOverlayType"
						(overlayEmit)="showOverlayFromCluster($event)">
					</itmp-clus-feat-overlay>
				</div>
			</div>

			<!-- incident overlay -->
			<div id="incident-overlay" style="width:300px;height:200px;background:transparent;overflow: visible">
				<div class="incident-overlay-container" *ngIf="overlayIsShow[OVERLAY_KEY.INCIDENT_OVERLAY]" [@zoomIn]>
					<itmp-incident-overlay [featureData]="featureData"></itmp-incident-overlay>
				</div>
			</div>

			<!-- equipment-overlay -->
			<div id="equipment-overlay" style="width:620px;min-height:150px;background:transparent;overflow: visible">
				<div class="equipment-overlay-container" *ngIf="overlayIsShow[OVERLAY_KEY.EQUIPMENT_OVERLAY]" [@zoomIn]>
					<itmp-equipment-overlay (visibleChange)="closeSpecificOverlay($event)" [featureData]="featureData">
					</itmp-equipment-overlay>
				</div>
			</div>
			<!-- overlay-end -->
		</div>

		<!-- tools-bar -->
		<div class="tools-bar flex flex-row flex-justify-around flex-items-center">
			<ng-template #indicatorTemplate><i nz-icon type="loading" style="font-size: 0.2rem;"></i> </ng-template>
			<nz-spin nzSimple [nzIndicator]="indicatorTemplate" *ngIf="geoLoading"> </nz-spin>
			<i class="iconfont icon-dingwei font-20-rem cur-p" style="color:#d81e06; position: relative;"
				*ngIf="isLoacteButtonShow && !geoLoading" (click)="geolocation()" [nzTitle]="'Gis.Gis.Locate' | translate" nzPlacement="top"
				nz-tooltip></i>

			<i class="iconfont icon-earth font-20-rem cur-p" style="color:#579EFF"
				(click)="map.getView().setZoom(MinZoom)" [nzTitle]="'Gis.Gis.Global' | translate" nzPlacement="top"
				nz-tooltip></i>
			<i class="iconfont icon-Undo font-20-rem cur-p" [class.disable]="viewStep === 0"
				(click)="gotoHistroy('prev')" [nzTitle]="'Gis.Gis.Prev_View' | translate" nzPlacement="top"
				nz-tooltip></i>
			<i class="iconfont icon-Redo font-20-rem cur-p"
				[class.disable]="viewIndexArr.length === 0 || viewStep === viewIndexArr.length - 1"
				(click)="gotoHistroy('next')" [nzTitle]="'Gis.Gis.Next_View' | translate" nzPlacement="top"
				nz-tooltip></i>
			<i class="iconfont icon-search font-20-rem cur-p" style="color:#949494" (click)="toggleSearchButton()"
				[nzTitle]="'Gis.Gis.Search' | translate" nzPlacement="top" nz-tooltip></i>
			<!-- <i class="iconfont icon-pen01 font-20-rem cur-p" style="color:#3f96f7"
				[nzTitle]="'Gis.Gis.Create_Zone' | translate" nzPlacement="top" nz-tooltip></i> -->
			<i class="iconfont icon-paper font-20-rem cur-p" style="color:#95a7ea" (click)="showLegends = !showLegends"
				[nzTitle]="'Gis.Gis.Legend' | translate" nzPlacement="top" nz-tooltip></i>
			<i class="iconfont icon-clear font-20-rem cur-p" style="color:#f5675d" (click)="clear()"
				[nzTitle]="'Gis.Gis.Clear' | translate" nzPlacement="top" nz-tooltip></i>
		</div>
		<!-- search -->
		<div class="search flex flex-items-center" *ngIf="isShowSearch" [@fadeIn] [@fadeOut]>
			<i class="iconfont icon-search font-20-rem cur-p" style="color:#949494"></i>
			<nz-select class="select" [(ngModel)]="searchType" (ngModelChange)='toggleDeviceType()'>
				<nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of searchOption"></nz-option>		
			</nz-select>
			<div class="border"></div>
			<input nz-input   (keyup)="onSearch($event)" [(ngModel)]="keyWords" />
		</div>

		<!-- legends -->
		<itmp-legends #LegendsComponent class="legends-box" [@zoomInOutNoRender]="showLegends ? 'in' : 'out'"
			(nodeSelctChange)="layersShowHide($event)" (treeDataList)="runParent($event)"></itmp-legends>

		<!-- map search result -->
		<div class="search-result-box" *ngIf="false"></div>
	</div>

</div>
